<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="../../../common/common.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<link href="${ctx}/static/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link href="${ctx}/static/css/basic.css" rel="stylesheet" type="text/css">
    <link href="${ctx}/static/plugins/validationEngine/css/validationEngine.jquery.css" rel="stylesheet" type="text/css">
    <style type="text/css">
        .btn-sm {
            border-width: 4px;
            font-size: 13px;
            padding: 4px 9px;
            line-height: 1.39;
        }

        .code_space {
            margin-left: -4px;
            margin-right: 14px;
        }

        .btn_key {
            background-color: #6fb3e0 !important;
            border-color: #6fb3e0;
        }

        .btn_key:hover {
            color: #fff;
            background-color: #39b3d7;
            border-color: #269abc;
        }

        .code_width {
            width: 36.5%;
        }

        @media only screen and (max-width: 767px ) {
            .code_width {
                width: 102%;
            }
        }

        .radios {
            margin-bottom: 20px;
            float: left;
            margin-left: 40px;
        }
        .form-control{
        	width:250px;
        }
        .image-control{
            width: 200px;
            height: 100px;
            border: solid thin seashell;
        }
    </style>
</head>
<body>
<div class="content">
	
	<form method="post" id="uploadForm1" enctype="multipart/form-data">
        <input style="width:0px;height:0px; border:none; float:left; margin-left:100px; margin-top:-30px;" type="file"
               id="businessFile" name="urlfile"
               onchange="doUpload('businessFile','uploadForm1','business_img','businesslicenseImage')"/>
        <input style="width:0px;height:0px; border:none; float:left; margin-left:100px; margin-top:-30px;"
               name="type" value="1"/>
        <input style="width:0px;height:0px; border:none; float:left; margin-left:100px; margin-top:-30px;"
               name="module" value="recommend"/>
    </form>
    <form method="post" id="uploadForm2" enctype="multipart/form-data">
        <input style="width:0px;height:0px; border:none; float:left; margin-left:100px; margin-top:-30px;" type="file"
               id="idCardFile1" name="urlfile"
               onchange="doUpload('idCardFile1','uploadForm2','idCard_img1','idCardImage1')"/>
        <input style="width:0px;height:0px; border:none; float:left; margin-left:100px; margin-top:-30px;"
               name="type" value="1"/>
        <input style="width:0px;height:0px; border:none; float:left; margin-left:100px; margin-top:-30px;"
               name="module" value="recommend"/>
    </form>
    <form method="post" id="uploadForm3" enctype="multipart/form-data">
        <input style="width:0px;height:0px; border:none; float:left; margin-left:100px; margin-top:-30px;" type="file"
               id="idCardFile2" name="urlfile"
               onchange="doUpload('idCardFile2','uploadForm3','idCard_img2','idCardImage2')"/>
        <input style="width:0px;height:0px; border:none; float:left; margin-left:100px; margin-top:-30px;"
               name="type" value="1"/>
        <input style="width:0px;height:0px; border:none; float:left; margin-left:100px; margin-top:-30px;"
               name="module" value="recommend"/>
    </form>
    <form method="post" id="uploadForm4" enctype="multipart/form-data">
        <input style="width:0px;height:0px; border:none; float:left; margin-left:100px; margin-top:-30px;" type="file"
               id="shopFile" name="urlfile"
               onchange="doUpload('shopFile','uploadForm4','shop_img','shopImage')"/>
        <input style="width:0px;height:0px; border:none; float:left; margin-left:100px; margin-top:-30px;"
               name="type" value="1"/>
        <input style="width:0px;height:0px; border:none; float:left; margin-left:100px; margin-top:-30px;"
               name="module" value="recommend"/>
    </form>
    
    
	
    <form class="form-horizontal" id="addForm">
	    <br>
		<br>
		<br>
		<div class="all" style="float:inherit;margin-top: -90px">
			<div class="left">
		          <div class="form-group">
		            <label for="roleCode" class="col-sm-4 control-label">公司名称:</label>
		            <div class="col-sm-3">
		                <input type="text" class="form-control validate[required]" id="companyName" name="companyName" placeholder="请输入公司名称">
		            </div>
		        </div>
		        <div class="form-group">
		            <label for="roleCode" class="col-sm-4 control-label"><span style="color:red;">*</span>商户名称:</label>
		            <div class="col-sm-3">
		                <input type="text" class="form-control validate[required]" id="merchantName" name="merchantName" placeholder="请输入商户名称">
		            </div>
		        </div>
		          <div class="form-group">
		            <label for="description" class="col-sm-4 control-label"><span style="color:red;">*</span>联系人:</label>
		            <div class="col-sm-3">
		                <input type="text" class="form-control validate[required]" id="personName" name="personName" data-fun="dataFunDemo" placeholder="请输入联系人">
		            </div>
		        </div>
		        <div class="form-group">
		            <label for="description" class="col-sm-4 control-label"><span style="color:red;">*</span>联系电话:</label>
		            <div class="col-sm-3">
		                <input type="text" class="form-control validate[required,custom[phone]]" id="merchantTel" name="merchantTel" data-fun="dataFunDemo" placeholder="请输入联系电话">
		            </div>
		        </div>
		        <div class="form-group">
		            <label for="description" class="col-sm-4 control-label">推广师电话:</label>
		            <div class="col-sm-3">
		                <input type="text" class="form-control validate[custom[phone]]" id="promoterTel" name="promoterTel"  placeholder="请输入推广师电话" onblur="getPromoterNameByTel()">
		            </div>
		        </div>
		        <div class="form-group">
		            <label for="description" class="col-sm-4 control-label">推广师名称:</label>
		            <div class="col-sm-3">
		                <input type="text" class="form-control" id="promoterName" name="promoterName" readonly="readonly"  data-fun="dataFunDemo"  placeholder="由推广师电话自动获取" >
		            </div>
		        </div>
		         <div class="form-group">
		            <label for="description" class="col-sm-4 control-label"><span style="color:red;">*</span>商戶分潤比率:</label>
		            <div class="col-sm-3">
		                <input type="text" class="form-control validate[required,custom[number],min[0.1300],max[0.3900],maxSize[6],minSize[4]]" id="businessProfitRatio" maxlength="6" name="businessProfitRatio" value="0.13">
		            </div>
		        </div>
		        <div class="form-group">
		            <label for="area_div" class="col-sm-4 control-label"><span style="color:red;">*</span>所属区域:</label>
		            <div id="area_div" style="width: 600px;height:27px;display:inline">
		            
		            <%-- <select  id="pro_code" name="proId" validate="required" msg="省区">
					<option value="">请选择省区</option>
					 	<c:forEach items="${provList }" var="prov">
							<option value="${prov.provinceId }" >${prov.provinceName }</option>
						</c:forEach>
					</select>
					
					<select name="cityId" id="city_code"  validate="required" msg="市级">
						<option value="">请选择市</option>
					</select> --%>				
		            </div>
        		</div>
        		<!-- <div class="form-group">
		            <label for="description" class="col-sm-4 control-label"><span style="color:red;">*</span>所属社区:</label>
		            <div class="col-sm-3">
		            	<select class="form-control validate[required]" id="communityId" name="communityId" data-fun="dataFunDemo"></select>
		            </div>
		        </div> -->
		         <div class="form-group">
		            <label for="description" class="col-sm-4 control-label"><span style="color:red;">*</span>详细地址:</label>
		            <div class="col-sm-3">
		                <input type="text" class="form-control validate[required]" id="address" name="address" data-fun="dataFunDemo"  placeholder="请输入详细地址">
		            </div>
		        </div>
	       </div>
	       <div class="right" style="margin-top: 20px">
				<div class="form-group">
		            <label for="businessNumber" class="col-sm-4 control-label"><span style="color:red;">*</span>营业执照:</label>
		            <div class="col-sm-3">
		                <!-- <input type="text" class="form-control validate[required]" id="businessNumber" name="businessNumber" data-fun="dataFunDemo" placeholder="请输入营业执照编号"> -->
		            </div> 
		            <div style="clear: both"></div>
		            <div style="clear: both;width: 500px;margin-left: 410px;margin-top: 10px">
		            <p>请上传营业执照的照片，照片大小不超过5M，推荐尺寸：100pxX200px。</p>
		                <div id="business_img" class="image-control">
		                    <input type="hidden" name="businesslicenseImage" id="businesslicenseImage"/>
		                </div>
		                <div style="text-align: left">
                            <input type="button" class="btn btn-success" onclick='$("#businessFile").click()'
                                   value="上传图片"/>
		                </div>
		            </div>
		
		        </div>
		        <div class="form-group">
		            <label for="personIdCard" class="col-sm-4 control-label"><span style="color:red;">*</span>负责人身份证:</label>
		            <div class="col-sm-3">
		                <!-- <input type="text" class="form-control validate[required]" id="personIdCard" name="personIdCard" data-fun="dataFunDemo" placeholder="请输入负责人身份证号"> -->
		            </div>
		            <div style="clear: both"></div>
		            <div style="clear: both;width: 500px;margin-left: 410px;margin-top: 10px">
		                <p>请上传代表您身份的照片，照片大小不超过5M，推荐尺寸：100pxX200px。</p>
		                <div style="float: left">
		                    <div id="idCard_img1" class="image-control">
		                        <input type="hidden" name="idCardImage1" id="idCardImage1"/>
		                    </div>
		                    <div style="text-align: left">
                                <input type="button" class="btn btn-success" onclick='$("#idCardFile1").click()'
                                       value="上传图片"/>
		                    </div>
		                </div>
		
		                <div  style="float: left;margin-left: 10px">
		                    <div id="idCard_img2" class="image-control">
		                        <input type="hidden" name="idCardImage2" id="idCardImage2"/>
		                    </div>
		                    <div style="text-align: left">
                                <input type="button" class="btn btn-success" onclick='$("#idCardFile2").click()'
                                       value="上传图片"/>
		                    </div>
		                </div>
		            </div>
		        </div>
		        
		        <div class="form-group">
		            <label for="shopImage" class="col-sm-4 control-label"><span style="color:red;">*</span>门店log:</label>
		            <div style="clear: both"></div>
		            <div style="clear: both;width: 500px;margin-left: 410px;margin-top: 10px">
		                <p>请上传门店log，照片大小不超过5M，推荐尺寸：100pxX200px。</p>
		                <div id="shop_img" class="image-control">
		                    <input type="hidden" name="shopImage" id="shopImage"/>
		                </div>
		                <div style="text-align: left">
                            <input type="button" class="btn btn-success" onclick='$("#shopFile").click()' value="上传图片"/>
		                </div>
		
		            </div>
		
		        </div>
		        
	       </div>
       </div>
        <div class="form-group">
            <div class="col-sm-10">
            	<button type="button" id="addBtn" class="btn btn-primary">保存</button>
            </div>
        </div>
    </form>
</div>
<script src="${ctx}/static/plugins/jQuery/jQuery-2.1.4.min.js"></script>
<script src="${ctx}/static/bootstrap/js/bootstrap.min.js"></script>
<script src="${ctx}/static/plugins/layer/layer.js"></script>
<script src="${ctx}/static/plugins/validationEngine/jquery.validationEngine-zh_CN.js"></script>
<script src="${ctx}/static/plugins/validationEngine/jquery.validationEngine.js"></script>
<script src="${ctx}/static/js/common/common.js" type="text/javascript"></script>
<script src="${ctx}/static/js/common/base.js" type="text/javascript"></script>
<script src="${ctx}/static/js/common/page.js" type="text/javascript"></script>
<script src="${ctx}/static/js/common/area.js" type="text/javascript"></script>
<script type="text/javascript">
	 areaAll({
		url: "/api/merchant/getAllPosition",
		startFun:function(){
			$("#area_div").find(".formError").remove();
		},
		totalSelect:4,
	    DivId: "area_div",
	    selectWidthArr: ["90px", "90px", "90px", "90px"],
	    areaArr: ["省份:","市:", "区县:","社区:"],
	    idArr: ["provinceId", "cityId", "countyId","townId"],
	    isNeedName: false,
	    spaceArrLeft:[5,5,5,5],
	    spaceArrRight:[5,5,5,5],
	    data: null,
	    backFun: function(){
	    	$("select[name='provinceId']").addClass("validate[required]");
	    	$("select[name='cityId']").addClass("validate[required]");
	    	$("select[name='countyId']").addClass("validate[required]");
	    	$("select[name='townId']").addClass("validate[required]");
	    }
	}) 

	<!--失去焦点通过推广师手机获取推广师名称-->
	   function getPromoterNameByTel(){
		   var promoterTel = $("#promoterTel").val();
		   //alert(promoterTel);
		   if(promoterTel!=""){
		  	   $.ajax({
		  	   async:false,
		       url:"/api/merchant/getPromoterNameByTel",
		       		data:{promoterTel:promoterTel},
		       	    type:"POST",
		       		dataType:"json",
		       		success:function(data){
		       			if(data.code=="200"){
		       			 	$("#promoterName").val(data.data);
		       			}else{
		       				alert(data.message);
		       				//alert("未获取会员信息");
		       			}
		       		}
		  		 });
		   }
	   }
	   /* <!--获取所有的社区 直辖市-->
		$("select[name='cityId']").change(function(){
			$.ajax({
		        timeout: 3000,
		        async: false,
		        type: "POST",
		        url: "/api/merchant/getCommunityByCountyId",
		        dataType: "json",
		        data: {
		        	'provinceId'   :$("select[name='provinceId']").val(),
		        	'cityId' 		:$("select[name='cityId']").val(),//直辖市只能到这
		        },
		        success: function (data) {
		        	$("#communityId").empty();
		            for (var i = 0; i < (data.data).length; i++) {
		                $("#communityId").append("<option value="+(data.data)[i].id+">" + (data.data)[i].name + "</option>");
		            }
		        }
		    });
		}) */
		<!--获取所有的社区 普通省-->
		/* $("select[name='countyId']").change(function(){
			$.ajax({
		        timeout: 3000,
		        async: false,
		        type: "POST",
		        url: "/api/merchant/getCommunityByCountyId",
		        dataType: "json",
		        data: {
		        	'countyId'	:$("select[name='countyId']").val(),//省下面的县
		        },
		        success: function (data) {
		        	$("#communityId").empty();
		            for (var i = 0; i < (data.data).length; i++) {
		                $("#communityId").append("<option value="+(data.data)[i].id+">" + (data.data)[i].name + "</option>");
		            }
		        }
		    });
		}) */
		
		function doUpload(id, form, img, url) {
        var shang = $("#sc");
        if (shang) {
            shang.remove();
        }


            var file = $("#" + id).val();
            if (checkImgType(file)) {
                $("#" + img).append(" <div style='text-align: center;color: white;background-color: silver;opacity:0.5' id='sc'> 上传中...</div>");
                var formData = new FormData($("#" + form)[0]);

                $.ajax({
                    url: '${ctx}/api/attachment/upload', /*这是处理文件上传的servlet*/
                    type: 'POST',
                    data: formData,
                    async: true,
//            cache: false,
                    contentType: false,
                    processData: false,
                    dataType: "json",
                    success: function (d) {
                        console.info(d);
                        if (d.code == "200") {
                            $("#" + url).val(d.data);
                            $("#" + img).css({
                                "background-image": "url('" + d.data + "')",
                                "height": "100px",
                                "background-size": "100% 100%"
                            });
                            $("#" + img).css({"height": "100px"});
                            $("#" + id).val(null);
                            $("#sc").remove();
//                    $("#sc").css({
//                        "background-color": "lawngreen",
//                    });
//                    $("#sc").html("上传成功");

                        } else {
                            alert(d.message);
                        }
                    },
                    error: function (d) {
                        alert("失败");
                        $("#sc").css({
                            "background-color": "red",
                        });
                        $("#sc").html("上传失败");
                    }
                });
            }
    }
		 
		 
		//businessProfitRatio
	$(function () {

		$("#addForm").validationEngine({ 
			promptPosition: "topRight", 
			validationEventTriggers:"keyup blur", 
			success :  false,
			failure : function() { callFailFunction()  }
			});
		
		$("#addBtn").click(function(){

			var flag = $("#addForm").validationEngine("validate");
			     if(!flag){
			          return false;
			           }

       	 	if($("#businesslicenseImage").val()==""){
            	alert("请上传营业执照照片!");
            	return;
            }
            if($("#idCardImage1").val()==""){
            	alert("请上传身份证照片!");
            	return;
            }
            if($("#idCardImage2").val()==""){
            	alert("请上传身份证照片!");
            	return;
            }
            if($("#shopImage").val()==""){
            	alert("请上传门店logo照片!");
            	return;
            }
			            //提交数据
			  $.ajax({
//			        async       : false,
			        type 		: "POST",
			        url: "${ctx}/api/merchant/addMercahntAndMerchantImage",
             data 		: $("#addForm").serializeJson(),
             success 	: function( d ) {
                 console.log(d);
                 if(d.code=="200"){
                	 alert("保存成功");
     				window.parent.menuSpecifyClick(32);//这里的32位数据库菜单待审核商户的id
<%--                 	 window.location.href = "${ctx}/api/merchant/examineListPage" --%>
                 } else {
                     alert(d.message);
                 }
             }
            });
        });
    });

    /*
     * 判断图片类型
     *
     * @param ths
     *          type="file"的javascript对象
     * @return true-符合要求,false-不符合
     */
    function checkImgType(file) {
        if (file == null || file == "") {
            alert("请选择要上传的图片!");
            return false;
        }
        if (file.lastIndexOf('.') == -1) {    //如果不存在"."
            alert("路径不正确!");
            return false;
        }
        var AllImgExt = ".jpg|.jpeg|.gif|.bmp|.png|";
        var extName = file.substring(file.lastIndexOf(".")).toLowerCase();//（把路径中的所有字母全部转换为小写）
        if (AllImgExt.indexOf(extName + "|") == -1) {
            ErrMsg = "该文件类型不允许上传。请上传 " + AllImgExt + " 类型的文件，当前文件类型为" + extName;
            alert(ErrMsg);
            return false;
        }
        return true;
    }
	
    
 <%--  //根据省查询城市//1:北京,20：天津,795:上海,2249:重庆
	$("#pro_code").change(function(){
			var city = $.ajax({
				url : "${ctx}/api/merchant/getPosition?id=" + $("#pro_code").val()+"&type=1",
				type : 'GET',
				success : function(data) {
					$("#city_code").empty().append("<option value=''>请选择市</option>");
					 for (var i = 0; i < (data.data).length; i++) {
			                $("#city_code").append("<option value="+(data.data)[i].cityId+">" + (data.data)[i].cityName + "</option>");
			            }
				}
			});
	}) --%>

</script>
</body>
</html>